<template>
  <view class="container">
    <navigationBar title="同款商品"></navigationBar>
    <!-- 筛选 -->
    <view :class="['filter',isChangeFilter === 1 ? 'change-fineness' : isChangeFilter === 2 ? 'change-price' : '']">
      <view class="filter-header">
        <text>综合</text>
        <view @click="priceSort">
          <text>价格</text>
          <image v-if="priceSortIndex === 0" src="../../static/shopDetails/price.svg" mode="" />
          <!-- 升序 -->
          <image v-if="priceSortIndex === 1" src="../../static/shopDetails/price-top.svg" mode="" />
          <!-- 降序 -->
          <image v-if="priceSortIndex === 2" src="../../static/shopDetails/price-bottom.svg" mode="" />
        </view>
        <view @click="changeFiltratePopup">
          <text>筛选</text>
          <image src="../../static/shopDetails/filtrate.svg" mode="" />
        </view>
      </view>
      <!-- 成色价格选择 -->
      <view class="filter-change">
        <view @click="changeFilter(1)" :class="[isChangeFilter === 1 ? 'change-filter' : '']">
          <text>成色</text>
          <image v-if="isChangeFilter === 1" src="../../static/shopDetails/top.svg" mode="" />
          <image v-else src="../../static/shopDetails/bottom.svg" mode="" />
        </view>
        <view @click="changeFilter(2)" :class="[isChangeFilter === 2 ? 'change-filter' : '']">
          <text>价格</text>
          <image v-if="isChangeFilter === 2" src="../../static/shopDetails/top.svg" mode="" />
          <image v-else src="../../static/shopDetails/bottom.svg" mode="" />
        </view>
      </view>
      <!-- 成色选择  刚开始隐藏了 -->
      <view class="fineness" v-if="isChangeFilter === 1">
        <view class="fineness-title">成色区间</view>
        <view class="fineness-list">
          <view 
            :class="['fineness-item',finenessIndex === item.id ? 'ischange' : '']" 
            v-for="(item) in dataList.finenessList" 
            :key="item.id"
            @click="changeFineness(item.id)"
          >{{item.content}}</view>
        </view>
        <view class="fineness-btn">
          <view @click="reset(1)">重置</view>
          <view @click="confim">确定</view>
        </view>
      </view>
      <!-- 价格选择  刚开始隐藏了 -->
      <view class="fineness" v-if="isChangeFilter === 2">
        <view class="fineness-title">价格区间</view>
        <view class="section">
          <view class="section-price">
            <uni-easyinput 
              v-model="minPrice" 
              placeholder="最低价格" 
            ></uni-easyinput>
            <view class="section-yuan">¥</view>
          </view>
          <view class="section-to"></view>
          <view class="section-price">
            <uni-easyinput 
              v-model="maxPrice" 
              placeholder="最高价格" 
            ></uni-easyinput>
            <view class="section-yuan">¥</view>
          </view>
        </view>
        <view class="fineness-list">
          <view 
            v-for="(item,index) in dataList.priceList" 
            :key="index" 
            :class="['fineness-item',priceIndex === index ? 'ischange' : '']"
            @click="changePrice(item,index)"
          >
            <text v-if="item.max">{{item.min}} ~ {{item.max}}</text>
            <text v-else>{{item.min}}以上</text>
          </view>
        </view>
        <view class="fineness-btn">
          <view @click="reset(2)">重置</view>
          <view @click="confim">确定</view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="shop-list">
      <view class="shop-item" v-for="item in dataList.shopList" :key="item.id" @click="toShopDetails(item.id)">
        <image :src="item.coverPic"/>
        <view class="shop-tag">
          <view v-if="item.fineness">{{item.fineness}}</view>
          <view v-if="item.isNew == 1">当季新款</view>
        </view>
        <view class="shop-name">{{ item.name }}</view>
        <text>¥{{ functions.formatToUSD(item.salePrice) }}</text>
      </view>
    </view>

    <!-- 暂无数据 -->
    <view class="is-end" v-if="isEnd">没有更多数据了</view>

    <!-- 蒙层 -->
    <view class="bg" v-if="isChangeFilter !== 0" @click="closePopup"></view>

    <!-- 更多筛选弹窗 -->
    <popup ref="filtratePopupRef" title="更多筛选">
      <view class="dialog-content fineness">
        <view class="fineness-title">成色区间</view>
        <view class="fineness-list">
          <view 
            :class="['fineness-item',finenessIndex === item.id ? 'ischange' : '']" 
            v-for="(item) in dataList.finenessList" 
            :key="item.id"
            @click="changeFineness(item.id)"
          >{{item.content}}</view>
        </view>
        <view class="fineness-title">价格区间</view>
        <view class="section">
          <view class="section-price">
            <uni-easyinput 
              v-model="minPrice" 
              placeholder="最低价格" 
            ></uni-easyinput>
            <view class="section-yuan">¥</view>
          </view>
          <view class="section-to"></view>
          <view class="section-price">
            <uni-easyinput 
              v-model="maxPrice" 
              placeholder="最高价格" 
            ></uni-easyinput>
            <view class="section-yuan">¥</view>
          </view>
        </view>
        <view class="fineness-list">
          <view 
            v-for="(item,index) in dataList.priceList" 
            :key="index" 
            :class="['fineness-item',priceIndex === index ? 'ischange' : '']"
            @click.stop="changePrice(item,index)"
          >
            <text v-if="item.max">{{item.min}} ~ {{item.max}}</text>
            <text v-else>{{item.min}}以上</text>
          </view>
        </view>
        <view class="fineness-btn">
          <view @click="reset(0)">重置</view>
          <view @click="confim">确定</view>
        </view>
      </view>
    </popup>

  </view>
</template>
<script setup>
  import { onMounted, ref, reactive } from 'vue'
  import {onLoad,onReachBottom} from "@dcloudio/uni-app";
  import { goodsFineness,sameGoodsList } from '@/api/shop'
  import functions from '../../utils/functions'

  const baseId = ref(0)  
  const isChangeFilter = ref(0)  //选择的是成色还是价格 0 都没选择  1成色  2价格
  const finenessIndex = ref(-1) //成色选择 
  const priceIndex = ref(-1)  //价格区间选择
  const priceSortIndex = ref(0)  // 价格排序
  const minPrice = ref('')  //最低价格
  const maxPrice = ref('')  //最高价格
  const isEnd = ref(false)  //数据是否加载完成
  const filtratePopupRef = ref(null)

  const dataList = reactive({
    shopList:[],
    finenessList:[],
    priceList:[
      {
        min:0,
        max:999
      },
      {
        min:1000,
        max:1999
      },
      {
        min:2000,
        max:4999
      },
      {
        min:5000,
        max:9999
      },
      {
        min:10000,
        max:19999
      },
      {
        min:20000,
        max:''
      },
    ]
  })

  //分页数据
	const pageData = reactive({
		pageSize:10,
		page:1
	})

  onLoad(({id}) => {
    baseId.value = Number(id)
  })

  onMounted(() => {
    getGoodsFineness()
    getGoodsSame()
  })

  onReachBottom(() => {
    console.log('滚动到底部')
		if(isEnd.value) return;
		pageData.page++
		getGoodsSame()
	})
  

  const closePopup = () => {
    isChangeFilter.value = 0
  }


  const changeFilter = (v) => {
    if(isChangeFilter.value === v){
      isChangeFilter.value = 0
      return;
    }
    isChangeFilter.value = v
  }
  //点击筛选
  const changeFiltratePopup = () => {
    isChangeFilter.value = 0
    filtratePopupRef.value.open()
  }

  //成色列表
  const getGoodsFineness = async () => {
    let res = await goodsFineness()
    // console.log('成色',res)
    dataList.finenessList = res
  }
  //同款
  const getGoodsSame = async () => {
    let datas = {
      ...pageData,
      baseId:baseId.value,
    }
    if(priceSortIndex.value !== 0) datas.priceState = priceSortIndex.value
    if(finenessIndex.value !== -1){
      datas.finenessId = [finenessIndex.value]
    }
    if(minPrice.value) datas.minimumPrice = Number(minPrice.value)
    if(maxPrice.value) datas.maximumPrice = Number(maxPrice.value)

    let res = await sameGoodsList(datas)
    console.log('同款对比',res)
    if(res.list.length < pageData.pageSize) isEnd.value = true
    dataList.shopList = res.list.map(item => {
      let imgArr = item.coverPicJSON.filter(item2 => item2.type === 'image')
      return {...item,coverPic:imgArr[0].name}
    })
  }

  const changeFineness = (id) => {
    finenessIndex.value = id
  }

  const changePrice = (item,index) => {
    priceIndex.value = index
    minPrice.value = item.min + ''
    maxPrice.value = item.max + ''
  }
  //价格排序
  const priceSort = () => {
    if (priceSortIndex.value === 0 || priceSortIndex.value === 2){
      priceSortIndex.value = 1
    }else if(priceSortIndex.value === 1){
      priceSortIndex.value = 2
    }
    pageData.page = 1
    getGoodsSame()
  }

  //确定
  const confim = () => {
    getGoodsSame()
    closePopup()
    filtratePopupRef.value.close()
  }

  //重置
  const reset = (type) => {
    if(type === 0){
      finenessIndex.value = -1
      priceIndex.value = -1
      minPrice.value = ''
      maxPrice.value = ''
    }else if(type === 1){
      finenessIndex.value = -1
    }else{
      priceIndex.value = -1
      minPrice.value = ''
      maxPrice.value = ''
    }
  }

</script>

<style lang='scss' scoped>
  .container {
    width: 100vw;
    height: 100vh;
    // background-color: rgba(71, 71, 71, 0);
    background-color: #f4f3f7;

    .bg{
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 8;
    }

    .filter{
      width: 100%;
      height: 160rpx;
      // height: 718rpx;
      background: white;
      padding-top: calc(var(--status-bar-height) + 90rpx);
      overflow: hidden;
      // position: fixed;
      // top: calc(var(--status-bar-height) + 90rpx);
      // left: 0;
      // z-index: 9;
      position: relative;
      z-index: 10;

      .filter-header{
        width: 100%;
        height: 82rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        @include flex(row,space-between);

        >text{
          font-weight: 500;
          font-size: 26rpx;
          color: #111111;
        }
        >view{
          @include flex(row,flex-start,center);
          >text{
            font-weight: 400;
            font-size: 26rpx;
            color: #666666;
          }
          >image{
            width: 34rpx;
            height: 34rpx;
            margin-left: 6rpx;
          }
        }
      }

      .filter-change{
        height: 60rpx;
        padding-left: 30rpx;
        padding-bottom: 18rpx;
        @include flex(row,flex-start);

        >.change-filter{
          background: rgba(22,223,242,0.13);
          border: 2rpx solid #16DFF2;

          >text{
            font-weight: 500;
            font-size: 22rpx;
            color: #111111;
          }
        }

        >view{
          width: 214rpx;
          height: 60rpx;
          background: #F4F3F7;
          border-radius: 30rpx;
          padding: 0 30rpx;
          box-sizing: border-box;
          margin-right: 24rpx;
          box-sizing: border-box;
          @include flex(row,space-between);

          >text{
            font-weight: 400;
            font-size: 22rpx;
            color: #666666;
          }
          >image{
            width: 16rpx;
            height: 16rpx;
          }

        }
      }

    }

    .change-fineness{
      // height: 718rpx;
      overflow: visible;
    }

    .change-price{
      // height: 718rpx;
      overflow: visible;
    }



    .shop-list{
      width: 100%;
      // padding-top:calc(var(--status-bar-height) + 90rpx + 158rpx); 
      // position:relative;
      // z-index: 10;
      @include flex(row,space-between,flex-start,wrap);

      .shop-item{
        width: 374rpx;
        height: 432rpx;
        margin-bottom: 2rpx;
        background: linear-gradient( 164deg, #FFFFFF 0%, #F8F8F8 100%);
        @include flex(column,flex-start,flex-start);
        image{
          width: 375rpx;
          height: 276rpx;
        }
        .shop-tag{
          width: 100%;
          height: 54rpx;
          margin-left: 30rpx;
          @include flex(row,flex-start);
          
          >view{
            // width: 100rpx;
            height: 30rpx;
            border: 1rpx solid #FE485B;
            font-weight: 400;
            font-size: 22rpx;
            color: #FE475B;
            text-align: center;
            line-height: 30rpx;
            margin-right: 12rpx;
            padding: 0 8rpx;
          }
          
        }
        .shop-name{
          width: 375rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          padding: 0 20rpx 0 30rpx;
          margin: 0 0 20rpx 0;
          box-sizing: border-box;
          @extend %text-overflow;
        }
        text:nth-of-type(1){
          font-family: Roboto, Roboto;
          font-weight: 500;
          font-size: 22rpx;
          color: #111111;
          padding-left: 30rpx;
        }
      }
    }

    .is-end{
			text-align: center;
			margin: 15rpx;
			color: #8a8a8a;
		}


    .fineness{
      width: 690rpx;
      // height: 560rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 4rpx 4rpx;
      padding:0 30rpx;


      .fineness-title{
        padding: 40rpx 0;
        font-weight: 500;
        font-size: 28rpx;
        color: #111111;
      }
      .fineness-list{
        width: 100%;
        @include flex(row,space-between,flex-start,wrap);

        .fineness-item{
          width: 214rpx;
          height: 88rpx;
          background: #F7F7F7;
          border-radius: 4rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
          flex-shrink: 0;
          margin-bottom: 24rpx;
          @include flex();
        }

        .ischange{
          color: #16DFF2;
        }
      }

      .fineness-btn{
        width: 690rpx;
        padding:72rpx 0 48rpx 0;
        @include flex(row,space-between);

        >view{
          width: 336rpx;
          height: 92rpx;
          border-radius: 4rpx;
          border: 2rpx solid #D9D9D9;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          box-sizing: border-box;
          @include flex();
        }

        >view:last-child{
          background: #16DFF2;
          color: #FFFFFF;
        }

      }

      .section{
        width: 100%;
        height: 88rpx;
        margin-bottom: 24rpx;
        @include flex(row,space-between);

        .section-price{
          width: 320rpx;
          height: 88rpx;
          position: relative;

          .section-yuan{
            width: 30rpx;
            height: 88rpx;
            line-height: 88rpx;
            color: #BFBFBF;
            position: absolute;
            left: 30rpx;
            top: 0rpx;
            font-weight: 600;
          }
        }

        ::v-deep .uni-easyinput{
          width: 100% !important;
        }

        ::v-deep .uni-easyinput__content-input{
          padding-left:70rpx !important;
          height: 88rpx !important;
          font-weight: 400;
          font-size: 28rpx;
          background-color: #F7F7F7;
        }

        ::v-deep .uni-easyinput__content{
          background-color: #F7F7F7 !important;
        }

        ::v-deep .uni-easyinput__placeholder-class{
          font-weight: 400;
          font-size: 28rpx;
          color: #CCCCCC;
        }

        ::v-deep .is-input-border{
          border: none !important;
        }

        ::v-deep .uni-icons{
          color: #D8D8D8 !important;
          font-size: 20px !important;
        }

        .section-to{
          width: 20rpx;
          height: 6rpx;
          background: #BFBFBF;
        }
      }
    }

    .dialog-content{
      .fineness-title{
        padding-top: 0 !important;
      }
    }
  }
</style>